<template>
  <div data-v-20f352ce class="space-right">
    
<div data-v-20f352ce="" class="space-right-top"><div data-v-20f352ce="" class="title"><div data-v-20f352ce=""><!----><!----><span data-v-20f352ce="">回复我的</span></div><!----></div></div>
    <div data-v-20f352ce data-no-clip="no-clip" class="space-right-bottom ps">
      <div data-v-20f352ce class="router-view" style>
        <div data-v-7d795f6c data-v-20f352ce class="d">
          <div data-v-5e150c4c data-v-7d795f6c class="bili-im">
            <div data-v-5e150c4c class="left">
              <div data-v-5e150c4c class="list-container ps">
                <!---->
                <div data-v-5e150c4c class="list">
                  <div data-v-28ca7eba data-v-5e150c4c class="list-item">
                    <div
                      data-v-28ca7eba
                      title="UP主小助手"
                      class="avatar"
                      style="background-image: url();"
                    ></div>
                    <!---->
                    <!---->
                    <div data-v-28ca7eba class="name-box">
                      <div data-v-28ca7eba title="UP主小助手" class="name">
                        <!---->
                        UP主小助手
                      </div>
                      <div data-v-28ca7eba title="有奖任务通知" class="last-word">
                        <!---->
                        <!---->
                        有奖任务通知
                      </div>
                    </div>
                    <div data-v-28ca7eba class="close">
                      <svg data-v-28ca7eba viewBox="0 0 40 40" class="css-1dtzbno">
                        <path
                          d="M22.83,20,38.42,4.41a2,2,0,1,0-2.83-2.83h0L20,17.17,4.41,1.58A2,2,0,0,0,1.58,4.41L17.17,20,1.58,35.59a2,2,0,0,0,2.83,2.83L20,22.83,35.59,38.42a2,2,0,1,0,2.83-2.83Z"
                        />
                      </svg>
                    </div>
                    <!---->
                    <!---->
                  </div>
                </div>
              </div>
              <!---->
            </div>
            <div data-v-5e150c4c class="right">
              <!---->
              <div data-v-3ea38e3d data-v-5e150c4c class="dialog">
                <div data-v-3ea38e3d class="title">
                  <div data-v-3ea38e3d class="is-limit" style="display: none;">该用户已被封禁～</div>
                  <div
                    data-v-3ea38e3d
                    class="is-black"
                    style="display: none;"
                  >(&gt;﹏&lt; )该用户已经被你加入黑名单</div>
                  <span data-v-3ea38e3d>哔哩哔哩漫画</span>
                  <div
                    data-v-61456f43
                    data-v-3ea38e3d
                    class="action-menu"
                    style="top: 3px; right: 0px;"
                  >
                    <div data-v-61456f43 class="menu-list" style="display: none;">
                      <!---->
                      <a data-v-61456f43 class="btn">置顶聊天</a>
                      <!---->
                      <!---->
                      <a data-v-61456f43 class="btn">开启免打扰</a>
                      <!---->
                      <!---->
                      <a data-v-61456f43 class="btn">加入黑名单</a>
                      <!---->
                      <!---->
                      <a data-v-61456f43 class="btn">举报该用户</a>
                      <!---->
                      <!---->
                      <!---->
                      <a data-v-61456f43 class="btn">
                        <span data-v-61456f43 class="name">不接收推送</span>
                        <span data-v-61456f43 class="tips">通知正常接收</span>
                      </a>
                    </div>
                    <a data-v-61456f43 class="btn bp-icon-font icon-more-1"></a>
                  </div>
                </div>
                <!---->
                <div data-v-3f1bf089 data-v-3ea38e3d class="message-list">
                  <div data-v-3f1bf089 class="message-list-content min_h_100">
                    <div data-v-2fe28aba data-v-3f1bf089 class="msg-more">
                      <span data-v-2fe28aba class="load-more" style="display: none;">
                        <span data-v-2fe28aba class="icon"></span>查看和他的历史私信消息
                      </span>
                      <span data-v-2fe28aba class="no-more" style="display: none;">没有更多消息了～</span>
                      <span data-v-2fe28aba class="loading" style="display: none;">
                        <div data-v-2fe28aba class="lds-spinner"></div>
                      </span>
                      <span data-v-2fe28aba class="error" style="display: none;">
                        消息加载失败，
                        <span data-v-2fe28aba class="btn">点击重新加载</span>
                      </span>
                    </div>

                    <div data-v-5645b0bf data-v-3f1bf089 class="msg-time">
                      <span data-v-5645b0bf class="time">发送时间：yyyy</span>
                    </div>
                  </div>
                </div>
                <div data-v-49f0a021 data-v-3ea38e3d class="send-box">
                  <div data-v-49f0a021 class="row">
                    <div data-v-49f0a021 class="space-margin">
                      <label data-v-49f0a021 class="image-upload-btn"></label>
                    </div>
                    <div data-v-49f0a021 class="space-margin emoji-container">
                      <button data-v-49f0a021 title="表情" class="emotion-btn-box"></button>
                      <!---->
                    </div>
                    <!---->
                  </div>
                  <div data-v-f371454e data-v-49f0a021 placeholder="回复一下吧～" class="input-box">
                    <div
                      data-v-f371454e
                      id="editor"
                      class="core-style"
                      style="height: 60px;"
                      contenteditable="true"
                    >‍1</div>
                    <div data-v-f371454e class="indicator" style="bottom: -30px; right: 100px;">
                      <span data-v-f371454e class>1</span>/
                      <span data-v-f371454e>500</span>
                    </div>
                  </div>
                  <div data-v-49f0a021 class="row right">
                    <button
                      data-v-70b6d4bb
                      data-v-49f0a021
                      class="btn-box send-btn active"
                      title="enter 发送
                          shift + enter 换行"
                    >发送</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mymsg",
  data() {
    return {};
  }
};
</script>
<style   scoped>
.nav-link .bili-icon_dingdao_xiazaiapp {
  margin-right: 2px;
  font-size: 18px;
  vertical-align: middle;
}
.nav-link .nav-link-ul {
  height: 36px;
  display: flex;
  align-items: center;
}
.nav-link .nav-link-ul.mini .bili-icon_dingdao_xiazaiapp {
  color: #00a1d6;
}
.nav-link .nav-link-ul .nav-link-item {
  margin-right: 12px;
}
.nav-link .nav-link-ul .nav-link-item .link {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  line-height: 32px;
  white-space: nowrap;
  display: flex;
}
.nav-link .nav-link-ul .nav-link-item .link .navbar_logo {
  width: 70px;
  height: 32px;
  margin-right: 16px;
}
.nav-link .nav-link-ul .nav-link-item .link .navbar_pullup {
  width: 16px;
  height: 16px;
  align-self: center;
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.nav-link .nav-link-ul .nav-link-item .link .new-icon {
  display: inline-block;
  width: 17px;
  height: 14px;
  margin-left: 4px;
  background: url(//s1.hdslb.com/bfs/seed/jinkela/header-v2/images/newIcon.png)
    center center no-repeat;
  background-size: cover;
}
.nav-link .bili-icon_dingdao_zhuzhan {
  margin-right: 6px;
  font-size: 18px;
  vertical-align: middle;
}
.popover-channe {
  padding: 0;
  width: 670px;
  height: 372px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.popover-game {
  padding: 0;
  width: 680px;
  height: 260px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.popover-live {
  padding: 0;
  width: 528px;
  height: 266px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.popover-manga {
  padding: 0;
  width: 720px;
  height: 266px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.popover-app-download {
  padding: 0;
  width: 280px;
  height: 212px;
  border: none;
  box-shadow: none;
  background: url(//s1.hdslb.com/bfs/seed/jinkela/header-v2/images/app-download.png);
  background-size: cover;
  background-position-y: -3px;
  display: flex;
  align-items: flex-end;
}
.popover-app-download .txt {
  font-size: 14px;
  color: #212121;
  width: 100%;
  text-align: center;
  padding-bottom: 24px;
}
.van-popover.van-popper.popover-channe,
.van-popover.van-popper.popover-game,
.van-popover.van-popper.popover-live,
.van-popover.van-popper.popover-app-download {
  padding: 0;
  top: 45px !important;
}
.van-popover.van-popper .download-client-entry {
  overflow: hidden;
  width: 387px !important;
  height: 216px;
  border: 1px solid #e3e5e7;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.van-popover.van-popper .download-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding: 19px 0 16px 0;
  height: 100%;
}
.van-popover.van-popper .download-wrapper .download-top {
  flex: 1;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.van-popover.van-popper .download-wrapper .download-top-left,
.van-popover.van-popper .download-wrapper .download-top-right {
  width: calc((100% - 1px) / 2);
}
.van-popover.van-popper .download-wrapper .download-top-content {
  text-align: center;
}
.van-popover.van-popper .download-wrapper .download-top-content .qr {
  margin: 0 auto;
  border: 1px solid #e3e5e7;
  border-radius: 4px;
  width: 95px;
  height: 95px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.van-popover.van-popper
  .download-wrapper
  .download-top-content
  .pink-pc-download {
  width: 52px;
  height: 52px;
}
.van-popover.van-popper .download-wrapper .download-top-content .button {
  display: block;
  margin: 0 auto;
  margin-top: 12px;
  background: #00aeec;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  font-size: 14px;
  width: 90px;
  text-align: center;
  cursor: pointer;
}
.van-popover.van-popper .download-wrapper .download-top-content .button:hover {
  background: #40c5f1;
  transition: 0.3s;
}
.van-popover.van-popper .download-wrapper .download-top-center {
  width: 1px;
  background: #e3e5e7;
  height: 143px;
}
.van-popover.van-popper .download-wrapper .download-top-title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.van-popover.van-popper .download-wrapper .download-top-title .main {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  color: #18191c;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.van-popover.van-popper .download-wrapper .download-top-title .main svg {
  margin-right: 3px;
}
.van-popover.van-popper .download-wrapper .download-top-title .sub {
  margin-bottom: 12px;
  color: #61666d;
  font-size: 12px;
  line-height: 17px;
}
.van-popover.van-popper .download-wrapper .download-bottom {
  color: #9499a0;
  font-size: 12px;
  line-height: 17px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.van-popover.van-popper .download-wrapper .download-bottom:hover {
  transition: 0.3s;
  color: #00aeec;
}
.van-popover.van-popper .download-wrapper .download-bottom .arrow-right {
  transform: rotate(-90deg);
  width: 10px;
  height: 10px;
}
.van-popover.van-popper .download-client-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.van-popover.van-popper .download-client-trigger__icon {
  margin-top: -2px;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}
.download-client-entry {
  overflow: hidden;
  width: 387px !important;
  height: 216px;
  border: 1px solid #e3e5e7;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.download-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding: 19px 0 16px 0;
  height: 100%;
}
.download-wrapper .download-top {
  flex: 1;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.download-wrapper .download-top-left,
.download-wrapper .download-top-right {
  width: calc((100% - 1px) / 2);
}
.download-wrapper .download-top-content {
  text-align: center;
}
.download-wrapper .download-top-content .qr {
  margin: 0 auto;
  border: 1px solid #e3e5e7;
  border-radius: 4px;
  width: 95px;
  height: 95px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.download-wrapper .download-top-content .button {
  display: block;
  margin: 0 auto;
  margin-top: 12px;
  background: #00aeec;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  font-size: 14px;
  width: 90px;
  text-align: center;
  cursor: pointer;
}
.download-wrapper .download-top-content .button:hover {
  background: #40c5f1;
  transition: 0.3s;
}
.download-wrapper .download-top-center {
  width: 1px;
  background: #e3e5e7;
  height: 143px;
}
.download-wrapper .download-top-title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.download-wrapper .download-top-title .main {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  color: #18191c;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.download-wrapper .download-top-title .main svg {
  margin-right: 3px;
}
.download-wrapper .download-top-title .sub {
  margin-bottom: 12px;
  color: #61666d;
  font-size: 12px;
  line-height: 17px;
}
.download-wrapper .download-bottom {
  color: #9499a0;
  font-size: 12px;
  line-height: 17px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.download-wrapper .download-bottom:hover {
  transition: 0.3s;
  color: #00aeec;
}
.download-wrapper .download-bottom .arrow-right {
  transform: rotate(-90deg);
  width: 10px;
  height: 10px;
}
.download-client-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.download-client-trigger__icon {
  margin-top: -2px;
  margin-right: 5px;
  width: 16px;
  height: 16px;
}
</style>